<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import type { UploadProps, UploadRawFile } from 'element-plus'
import MyDialog from "../common/MyDialog.vue";
import SourcePictureNew from "../videoWarehouse/SourcePictureNew.vue";
import axiosUtil from '../../axios-util/axios-util'

const inputText = ref('')
const outputText = ref('')
const imageUrl = ref('')

const beforeUpload: UploadProps['beforeUpload'] = (file) => {
  const isValidFormat = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'].includes(file.type)
  const isLt10M = file.size / 1024 / 1024 < 10

  if (!isValidFormat) {
    ElMessage.error('只能上传 PNG/JPG/GIF/WebP 格式的图片！')
    return false
  }
  if (!isLt10M) {
    ElMessage.error('图片大小不能超过 10MB！')
    return false
  }

  // 检查图片尺寸
  return new Promise((resolve, reject) => {
    const img = new Image()
    img.src = URL.createObjectURL(file)
    img.onload = () => {
      if (img.width < 500 || img.height < 500) {
        ElMessage.error('图片尺寸不能小于 500x500 像素！')
        reject(false)
      } else {
        resolve(true)
      }
      URL.revokeObjectURL(img.src)
    }
  })
}

const handleSuccess: UploadProps['onSuccess'] = (response) => {
  // TODO: 处理上传成功后的逻辑
  imageUrl.value = URL.createObjectURL(response.raw as Blob)
}

const handleError: UploadProps['onError'] = () => {
  ElMessage.error('上传失败，请重试')
}

const generateText = async() => {
  // TODO: 实现文本生成逻辑
  if(selectVideoData.value){
    const response = await axiosUtil.post('api/opencz/tupian_to_xiaohongshu', {
      url:selectVideoData.value[0]
    })
    if(response.data.code===1){
      //这里是成功的逻辑，但是目前没有成功，所以不知道怎么写
    }else{
      ElMessage.error(response.data.msg)
    }
  }else{
    ElMessage.error('请先上传图片')
  }
}

// 在 <script setup> 里添加自定义事件处理函数
const yourCustomHandler = () => {
  // ElMessage.info('你点击了上传区域，可以自定义弹窗或其他操作')
  showUploadDialog.value = true
}

const showUploadDialog = ref(false)
const selectVideoData = ref(null)

const sourceVideoNewRef = ref();

function handleUploadConfirm() {
  // 获取子组件暴露的选中数据
  if (sourceVideoNewRef.value && sourceVideoNewRef.value.getSelectMateria) {
    selectVideoData.value = sourceVideoNewRef.value.getSelectMateria();
  }
  showUploadDialog.value = false;
}
</script>

<template>
  <div class="picture-to-note">
    <div class="container">
      <div class="upload-section">
        <div
          class="upload-box"
          @click="yourCustomHandler"
          style="cursor: pointer;"
        >
          <template v-if="!selectVideoData">
            <div class="upload-content">
              <el-icon class="upload-icon"><upload-filled /></el-icon>
              <div class="upload-text">点击上传或拖拽图片到此处</div>
              <div class="upload-hint">PNG, JPG, Webp or GIF（最大10MB，最小尺寸500x500像素）</div>
            </div>
          </template>
          <template v-else>
            <img :src="selectVideoData" class="uploaded-image" />
          </template>
        </div>
        <div class="footer-hint">文案生成服务不会收集、存储或使用任何与图片相关的个人信息</div>
      </div>

      <div class="text-section">
        <div class="text-header">你的文案关键想法（3-20）字</div>
        <textarea
          v-model="inputText"
          class="input-area"
          placeholder="请输入内容">
        </textarea>
        <button class="generate-btn" @click="generateText">✨ 模拟文案生成</button>
        <textarea
          v-model="outputText"
          class="output-area"
          placeholder="请输入内容">
        </textarea>
      </div>
    </div>

    <MyDialog
        v-model="showUploadDialog"
        title="素材上传"
        width="50%"
        :modal="true"
        :close-on-click-modal="false"
        @confirm="handleUploadConfirm"
    >
      <SourcePictureNew ref="sourceVideoNewRef" @confirm="handleUploadConfirm"/>
    </MyDialog>
  </div>
</template>

<style scoped>
.picture-to-note {
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.container {
  display: flex;
  gap: 20px;
  flex: 1;
  width: 100%;
  min-height: 0;
}

.upload-section {
  flex: 1;
  min-width: 0;
}

.upload-box {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.1); /* 透明白色 */
  border: 1px dashed #dcdfe6;                /* 虚线边框 */
  border-radius: 8px;
  transition: border-color 0.3s, background-color 0.3s;
}
.upload-box:hover {
  background-color: rgba(255, 255, 255, 0.2);
  border-color: #7c4dff;
}

:deep(.el-upload) {
  width: 100%;
  height: 100%;
}

:deep(.el-upload-dragger) {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.1);
  border-color: #dcdfe6;
  backdrop-filter: blur(10px);
}

:deep(.el-upload-dragger:hover) {
  background-color: rgba(255, 255, 255, 0.2);
  border-color: #7c4dff;
}

.upload-content {
  text-align: center;
}

.upload-icon {
  font-size: 40px;
  color: #666;
  margin-bottom: 20px;
}

.upload-text {
  font-size: 18px;
  color: #333;
  margin-bottom: 10px;
}

.upload-hint {
  font-size: 14px;
  color: #666;
}

.uploaded-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.text-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
  min-width: 0;
  height: 100%;
}

.text-header {
  font-size: 16px;
  color: #333;
}

.input-area {
  width: 100%;
  flex: 1;
  min-height: 80px;
  max-height: 120px;
  padding: 15px;
  border: 1px solid #dcdfe6;
  border-radius: 8px;
  resize: none;
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  box-sizing: border-box;
}

.output-area {
  width: 100%;
  flex: 2;
  min-height: 150px;
  padding: 15px;
  border: 1px solid #dcdfe6;
  border-radius: 8px;
  resize: none;
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  box-sizing: border-box;
}

.input-area:hover, .output-area:hover {
  background-color: rgba(255, 255, 255, 0.2);
  border-color: #7c4dff;
}

.input-area:focus, .output-area:focus {
  background-color: rgba(255, 255, 255, 0.2);
  border-color: #7c4dff;
  outline: none;
}

.generate-btn {
  background-color: #7c4dff;
  color: white;
  border: none;
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
}

.generate-btn:hover {
  background-color: #6c3fff;
}

.footer-hint {
  text-align: center;
  color: #666;
  font-size: 14px;
  padding-top: 20px;
}
</style>
